{% extends "base.html" %}
{% block title %}
    <title>用户信息</title>
{% endblock %}


{% block content %}
    <div class="jumbotron">
        <h1>甲基化早筛项目数据库管理系统Demo</h1>

        <h4>用户信息</h4>
        <form id="infoForm">
            {% csrf_token %}
            <div class="form-group">
                <label for="username"> 用户名</label>
                <input type="text" class="form-control" id="username" name="username" value="{{ user.username }}">
            </div>
            <div class="form-group">
                <label for="nick_name"> 昵称</label>
                <input type="text" class="form-control" id="nick_name" name="nick_name" value="{{ user.nick_name }}">
            </div>
            <div class="form-group">
                <label for="email"> 邮箱地址</label>
                <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}">
            </div>
            <div class="form-group">
                <label for="bulk_delete_privilege"> 批量删除权限（如需修改，请联系管理员）</label>
                <input readonly="readonly" type="text" class="form-control" id="bulk_delete_privilege"
                       name="bulk_delete_privilege" value="{{ user.bulk_delete_privilege }}">
            </div>
            <button type="button" class="btn btn-primary"
                    id="reset">重置
            </button>&nbsp;&nbsp;
            <button type="submit" class="btn btn-info"
                    id="editSubmit">递交修改
            </button>
        </form>

        <p id="editError"></p>
    </div>
{% endblock %}


{% block extra_js %}
    <script>
        $(document).ready(function () {
            let user = $.ajax({
                url: '/api/UserInfo/', dataType: 'json', contentType: "application/json",
                type: "get", async: false, data: {'username': "{{ user.username }}"}
            }).responseJSON[0];
            console.log('username: ' + '{{ user.username }}');
            console.log('nick_name: ' + '{{ user.nick_name }}');
            console.log('email: ' + '{{ user.email }}');

            $('#reset').click(function (e) {
                e.preventDefault();
                location.reload();
            });

            $('#editSubmit').click(function (e) {
                e.preventDefault();
                user['username'] = $('#username').val();
                user['nick_name'] = $('#nick_name').val();
                user['email'] = $('#email').val();
                let data_tmp = $.param(user);
                $.ajax({
                    url: '/api/UserInfo/' + {{ user.index }} +'/',
                    data: data_tmp,
                    method: 'PUT',
                    headers: {'X-HTTP-Method-Override': 'PATCH'},
                    success: function () {
                        window.location.reload(true);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR + ';' + textStatus + ';' + errorThrown);
                        $('#editError').text('修改失败');
                    }
                });
            });
        })

    </script>
{% endblock %}